<template>
  <xn-form-container :title="formData.id ? '编辑商品' : '增加商品'" :width="700" :visible="visible" :destroy-on-close="true"
    @close="onClose">
    <a-form ref="formRef" :model="formData" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" autocomplete="off">
      <a-form-item label="商品分类：" name="categoryId">
        <a-select v-model:value="formData.categoryId" placeholder="请选择商品分类">
          <a-select-option :value="item.id" v-for="item in categoryIdOptions">{{ item.categoryName }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="排序号：" name="categoryId">
        <a-input-number v-model:value="formData.sortCode" placeholder="请输入商品分类" :options="categoryIdOptions" />
      </a-form-item>
      <a-form-item label="商品名：" name="goodsName" :rules="[{ required: true, message: '必填项不能为空' }]">
        <a-input v-model:value="formData.goodsName" placeholder="请输入商品名" allow-clear />
      </a-form-item>
      <a-form-item label="价格：" name="cost" :rules="[{ required: true, message: '必填项不能为空' }]">
        <a-input v-model:value="formData.cost" placeholder="请输入价格" allow-clear />
      </a-form-item>
      <a-form-item label="能否会员支付：" name="isMemberPayment">
        <a-radio-group v-model:value="formData.isMemberPayment" placeholder="请选择能否会员支付"
          :options="isMemberPaymentOptions" />
      </a-form-item>
      <a-form-item label="是否正在销售：" name="isOnSale">
        <a-radio-group v-model:value="formData.isOnSale" placeholder="请选择是否正在销售" :options="isOnSaleOptions" />
      </a-form-item>
      <a-form-item label="是否可寄存：" name="isCheck">
        <a-radio-group v-model:value="formData.isCheck" placeholder="请选择是否可寄存" :options="isCheckOptions" />
      </a-form-item>
      <a-form-item label="描述：" name="description">
        <a-textarea v-model:value="formData.description" placeholder="请输入描述" :auto-size="{ minRows: 3, maxRows: 5 }" />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
      <a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
    </template>
  </xn-form-container>
</template>

<script setup name="bizGoodsForm">
import tool from '@/utils/tool'
import { cloneDeep } from 'lodash-es'
import bizGoodsApi from '@/api/biz/bizGoodsApi'
import bizGoodsGoodscategoryApi from '@/api/biz/bizGoodsGoodscategoryApi'
// 抽屉状态
const visible = ref(false)
const emit = defineEmits({ successful: null })
const formRef = ref()
// 表单数据
const formData = ref({})
const submitLoading = ref(false)
const categoryIdOptions = ref([])
const sellStateOptions = ref([])
const isAlterPriceOptions = ref([])
const isMemberPaymentOptions = ref([])
const isOnSaleOptions = ref([])
const isCheckOptions = ref([])

// 打开抽屉
const onOpen = (record) => {
  visible.value = true
  if (record) {
    let recordData = cloneDeep(record)
    formData.value = Object.assign({}, recordData)
  }
  // categoryIdOptions.value = tool.dictList('GOODSCATEGORY')
  sellStateOptions.value = tool.dictList('SALESSTATUS')
  isAlterPriceOptions.value = tool.dictList('是')
  isMemberPaymentOptions.value = tool.dictList('是')
  isOnSaleOptions.value = tool.dictList('是')
  isCheckOptions.value = tool.dictList('是')
}
// 关闭抽屉
const onClose = () => {
  formRef.value.resetFields()
  formData.value = {}
  visible.value = false
}
// 验证并提交数据
const onSubmit = () => {
  formRef.value.validate().then(() => {
    submitLoading.value = true
    const formDataParam = cloneDeep(formData.value)
    bizGoodsApi
      .bizGoodsSubmitForm(formDataParam, formDataParam.id)
      .then(() => {
        onClose()
        emit('successful')
      })
      .finally(() => {
        submitLoading.value = false
      })
  })
}
const loadCategoryData = (parameter) => {
  return bizGoodsGoodscategoryApi.bizGoodsCategoryPage(parameter).then((data) => {
    categoryIdOptions.value = data.records
  })
}
loadCategoryData()
// 抛出函数
defineExpose({
  onOpen
})
</script>
